<template>
    <div class="my">
        <div class="img">
            <img :src="BaseUrl+avator" class="avator" @click="avatorUpdate" alt="" />
            <span>{{name}}</span>
        </div>
        <ul>
            <li @click="showInfo()">查看个人信息 <i class="el-icon-arrow-right"></i></li>
            <li @click="modify()">编辑个人信息 <i class="el-icon-arrow-right"></i></li>
            <li @click="total()">消息统计 <i class="el-icon-arrow-right"></i></li>
            <li @click="quit()">退出 <i class="el-icon-arrow-right"></i></li>
        </ul>

        <el-dialog title="个人信息" :visible.sync="dialogVisible" width="80%">
            <div class="info">
                <ul>
                    <li>昵称：{{name}}</li>
                    <li>账号：{{username}}</li>
                    <li>头像：<img :src="BaseUrl + avator" @click="previewImage(BaseUrl + avator)" alt=""></li>
                    <li>性别：
                        <el-select style="width: 180px;" v-model="sex" placeholder="请选择性别" disabled>
                            <el-option label="男" :value="1"></el-option>
                            <el-option label="女" :value="0"></el-option>
                            <el-option label="不显示" :value="-1"></el-option>
                        </el-select>
                    </li>
                    <li>
                        年龄：
                        <el-select style="width: 180px;" v-model="age" placeholder="请选择年龄" disabled>
                            <el-option v-for="item in 100" :key="item" :label="item+'岁'" :value="item">
                            </el-option>
                        </el-select>
                    </li>
                    <li>
                        个性签名：{{sign}}
                    </li>
                </ul>
            </div>
            <div slot="footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
import { BaseUrl } from '@/Api/config';
import previewImage from '@/tools/previewImage';
export default {
    name: 'my-vue',
    components: {
    },

    props: {},

    data() {
        return {
            name: '',
            avator: '',
            username: '',
            dialogVisible: false,
            BaseUrl
        }
    },

    watch: {},

    created() {
        this.getData();
    },

    activated() {
        this.getData();
    },

    mounted() {
    },

    methods: {
        getData() {
            this.name = localStorage.getItem('name');
            console.log(111, this.name)
            this.username = localStorage.getItem('username');
            this.avator = localStorage.getItem('avator');
            this.age = Number(localStorage.getItem('age')) || '';
            this.sex = Number(localStorage.getItem('sex'));
            this.sign = localStorage.getItem('sign') || '';
            this.userId = localStorage.getItem('user-id');
            this.condition = process.env.NODE_ENV;
        },
        avatorUpdate() {
            let condition = process.env.NODE_ENV
            let url = BaseUrl+ '/uploadImg' ;
            let that = this;
            this.$upload({
                url,
                headers: {
                    'user-id': localStorage.getItem('user-id'),
                    'token': localStorage.getItem('token') || ''
                },
                multiple: false,
                accept: "image/*",
                onSuccess(res) {
                    // console.log(res)
                    if (res.code == 1) {
                        that.$msg.success(res.message);
                        const { avator } = res.data[0];
                        that.avator = avator;
                        localStorage.setItem('avator', avator);
                    } else {
                        that.$msg.warning(res.message);
                    }
                },
                onError() {
                    // console.log(111);
                    that.$msg.error("网络出错");
                }
            })
        },

        modify(/* type */) {
            // 

            this.$router.push({
                path: '/modify',
                // query: {
                //     title: name,
                //     type
                // },
            })
            // if (this.name == localStorage.getItem('name')) return
            // this.$http.get('/modyfyname', {
            //     name: this.name
            // }).then((res) => {
            //     localStorage.setItem('name', res.name);
            // })
        },

        quit() {
            let is = confirm("确定退出？")
            if (is) {
                this.$router.replace('/login');
                localStorage.clear();
                this.$store.commit('setKeepList', []);
            }

        },

        total() {
            let routeUrl = this.$router.resolve({
                path: "/canvas",
            });
            window.open(routeUrl.href, '_blank');
        },

        showInfo() {
            this.dialogVisible = true
        },

        previewImage
    }
}
</script>

<style lang="less" scoped>
.my {
    height: 100%;
    background: #f5f5f5;
    overflow: auto;
    padding: 30px;
    padding-top: 30px;
    .img {
        display: flex;
        img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
        }
        span {
            font-weight: bold;
            font-size: 18px;
            margin-left: 10px;
            transform: translateY(30px);
        }
        margin-bottom: 20px;
    }

    ul {
        li {
            padding: 10px;
            display: flex;
            justify-content: space-between;
            i {
                font-size: 18px;
            }
        }
    }

    .el-dialog {
        .info {
            ul {
                li {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    img {
                        width: 50px;
                        height: 50px;
                        object-fit: cover;
                    }
                }
            }
        }
    }
}
</style>